<template>
  <div class="apply-home">
    <div class="flex flex-row">
      <el-row :gutter="30">
        <el-col :span="6">
          <div
            class="grid-content bg-purple"
            @click="openTipsDialog"
            @mouseover="showTipsFun(1)"
            @mouseleave="showTips = false"
          >
            <img src="@/assets/1.png">
            <div class="title">技术申报</div>
            <div class="des">临床</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div
            class="grid-content bg-purple"
            @click="jumpUplist('20')"
            @mouseover="showTipsFun(2)"
            @mouseleave="showTips = false"
          >
            <img src="@/assets/2.png">
            <div class="title">初审</div>
            <div class="des">医务</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div
            class="grid-content bg-purple"
            @click="jumpUplist('40')"
            @mouseover="showTipsFun(3)"
            @mouseleave="showTips = false"
          >
            <img src="@/assets/4.png">
            <div class="title">院内评审</div>
            <div class="des">评审专家</div>
            <!-- <div class="btn-list flex flex-row mt50">
              <el-button type="primary" class="first">初审</el-button>
              <el-button type="primary">发起评审</el-button>
            </div> -->
          </div>
        </el-col>
        <el-col :span="6">
          <div
            class="grid-content bg-purple"
            @click="jumpUplist('60')"
            @mouseover="showTipsFun(4)"
            @mouseleave="showTips = false"
          >
            <img src="@/assets/3.png">
            <div class="title">收费价格开通</div>
            <div class="des">财务</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-show="showTips" class="mt60 font18 tips">
      <div class="flex flex-row tip-item">
        <div class="label font20 width120 color-purple">{{ label1 }}</div>
        <div class="des font20">{{ des1 }}</div>
      </div>
      <div class="flex flex-row mt40 tip-item">
        <div class="label font20 width120 color-purple">{{ label2 }}</div>
        <div class="des font20 flex-auto">
          <el-steps :active="9">
            <el-step title="申报" />
            <el-step title="科室负责人审批" />
            <el-step title="初审" />
            <el-step title="组织评审" />
            <el-step title="院内评审" />
            <el-step title="院内评审结果/医疗技术评审结果" />
            <el-step title="院外评审材料" />
            <el-step title="院外评审" />
            <el-step title="收费价格开通" />
          </el-steps>
        </div>
      </div>
    </div>
    <ApplyDialog ref="applyDialog" />
    <TipsDialog ref="tipsDialog" @showApply="openApply" />
    <TipsDialog2 ref="tipsDialog2" @showApply="openApply" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import ApplyDialog from './components/applyDialog.vue'
import TipsDialog from './components/tipsDialog.vue'
import TipsDialog2 from './components/tipsDialog2.vue'
export default {
  name: 'ApplyHome',
  components: { ApplyDialog, TipsDialog, TipsDialog2 },
  data() {
    return {
      showTips: false,
      label1: '',
      des1: '',
      label2: '流转方向',
      des2:
        '申报-科室负责人审批-初审-组织评审-院内评审-院内评审结果/医疗技术评审结果-院外评审材料-院外评审-收费价格开通'
    }
  },
  computed: {
    ...mapGetters(['globalConfig'])
  },
  created() {},
  methods: {
    showTipsFun(type) {
      if (this.globalConfig.folderName === 'PTZX') {
        return
      }
      switch (type) {
        case 1:
          this.label1 = '临床'
          this.des1 = '对新技术新项目材料进行提交'
          break
        case 2:
          this.label1 = '医务'
          this.des1 = '对新技术新项目提交的材料进行初审'
          break
        case 3:
          this.label1 = '评审专家'
          this.des1 = '根据新技术新项目提交的材料进行院内评审'
          break
        case 4:
          this.label1 = '财务'
          this.des1 = '对新技术新项目的收费价格进行开通'
          break
      }
      this.showTips = true
    },
    jumpUplist(status) {
      this.$router.push({ path: '/xjsxxm/apply/pendApproval?status=' + status })
    },
    openApply() {
      // this.$refs.applyDialog.getNewDeptTreeList()
      // this.$refs.applyDialog.getNewDeptListManager()
      // this.$refs.applyDialog.getNewGetUserInfo()
      this.$refs.applyDialog.open()
      // this.$refs.applyDialog2.open()
    },
    openTipsDialog() {
      if (this.globalConfig.folderName === 'PTZX') {
        this.$refs.tipsDialog.open()
      } else {
        this.$refs.tipsDialog2.open()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.apply-home {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 50px);
    padding: 50px 100px;
    margin: 0 auto;
    .el-row {
        margin-bottom: 20px;
        width: 100%;
        height: 100%;

        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        height: 100%;
    }
    .bg-purple {
        background: #ffffff;
    }

    .grid-content {
        border-radius: 10px;
        min-height: 36px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #333;
        position: relative;
        top: 0;
        right: 0;
        transition: 0.2s all ease;
        -webkit-box-shadow: 0 15px 30px 0 rgb(0 0 0 / 20%);
        box-shadow: 0 15px 30px 0 rgb(0 0 0 / 20%);
        min-height: 300px;
        img {
            margin-top: 6%;
        }
        .title {
            font-size: 22px;
            margin-top: 20px;
        }
        &:hover {
            top: -3px;
            right: -1px;
            -webkit-box-shadow: 0 15px 30px 0 rgb(0 0 0 / 50%);
            box-shadow: 0 15px 30px 0 rgb(0 0 0 / 50%);
            cursor: pointer;
        }
        .des {
            margin-top: 20px;
            font-size: 16px;
            color: #97a2b0;
        }
    }
    .color-purple {
        color: #ea7f35;
    }
    .tips {
        padding: 20px;
        /*border: 2px solid rgba(234, 127, 53, 0.3);
-webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 10%);
box-shadow: 0 5px 5px 0 rgb(0 0 0 / 10%);*/
    }
}
</style>
